<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>活动列表 - 五四宪法历史资料陈列室</title>
    <link rel="stylesheet" href="/static/pc/css/style.css">
    <link rel="stylesheet" href="/static/layui/layui/css/layui.css"  media="all">
    <script src="/static/pc/js/jquery.min.js"></script>
    <script src="/static/js/common.js"></script>
    <script src="/static/js/common.js"></script>
    <script src="/static/layui/layui/layui.all.js"></script>
</head>
<body>
<div class="head">
    <img src="/static/pc/img/head.jpg" alt="">
</div>
<div class="main">
    <a class="back" href="javascript:history.back(-1)">返回</a>
    <div class="activity_detail">
        <div>
            <img src="{$active.image}" alt="">
            <div>
                <h3>{$active.title}</h3>
                <p><em>活动日期:</em><span> {$active.day}——{$active.endday}</span></p>
                <p><em>活动时间:</em><span> {$active.timer}</span></p>
                <p><em>活动地址:</em><span> {$active.addr}</span></p>
            </div>
            <div class="content"><em>活动简介:</em><div class="content"><p> {$active.content}</p></div></p>
            </div>
        </div>
    </div>
    <form action="activity_deta" id="activity_info" method="post">
        <input name="mobile" class="long" type="hidden" value="{$Think.session.mobile}">
        <div class="content information activity_info">
            <input type="hidden" name="id" value="{$active.id}" class="acid">
            <div class="prev_part">
                <div>
                    <span>参与时间</span>
                    <select name="day"  class="hday">
                        {foreach $time as $k=>$val}
                        <option value="{$val}">{$val}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="visitor_num">
                    <span>参与人数</span><input name="views" type="text" class="number cgr" placeholder="请输入人数" title="参与人数">
                    {if $active.sum < 1}
                    <em class="orange">活动已满员,请联系五四宪法历史资料陈列馆</em>
                    {else/}
                    <em class="orange">活动名额还剩{$active.sum}位</em>
                    {/if}
                </div>
                <p class="clear"></p>
              <div class="hy" {if $active.sum < 1} style="display: none" {/if} >
                <div class="address">
                    <span>地区</span>
                    <select name="province" class="province fl">
                        {foreach $province as $k=>$v}
                        {if $k eq 933}
                        <option value="{$k}" selected>{$v}</option>
                        {else/}
                        <option value="{$k}">{$v}</option>
                        {/if}
                        {/foreach}
                    </select>
                    <div class="city1 fl">
                        <select name="city" class="city">
                            <option value="934">杭州市</option>
                        </select>
                    </div>
                    <div class="country1 fl" style="display: none">
                        <select name="country" class="country">
                        </select>
                    </div>
                </div>
                <div>
                    <span>联系人姓名</span><input class="contact_name" name="name" type="text" placeholder="请输入联系人姓名" title="联系人姓名">
                </div>
                <div>
                    <span>联系方式</span><input name="mobile" type="text" class="telephone" onkeyup="checkMobile($(this).val())" placeholder="请输入联系电话" title="联系方式">
                </div>
                <div class="codezong">
                    <span>输入验证码</span><input name="code" type="text" class="code" placeholder="请输入验证码" title="验证码">
                    <a class="send" href="javascript:;" onclick="sendMobile(this)">获取验证码</a>
                </div>
                <input type="hidden" name="status" value="1">
                <p class="clear"></p>
                <div class="button">
                    <a class="submit" onclick="checkParse()"><img src="/static/pc/img/check1.png" alt=""></a>
                </div>
              </div>
            </div>
        </div>
    </form>
</div>
<script>
    function setValue() {
        $('.timeList').on('click',"a",function(){
            if($(this).hasClass('booked')){
                return false;
            }
            if($(this).hasClass('booked1')){
                return false;
            }
            $(this).addClass('on').siblings().removeClass('on');
            $('.time').val($(this).html());
        })
    }
    function checkMobile(tel) {
        if(tel.length==11){
            var reg = /(^1[3|4|5|6|7|8|9][0-9]{9}$)/;
            if (reg.test(tel)) {
                $('.send').addClass('send_button');
                $(".send").attr("onclick","sendMobile(this);");
                return true;
            }else{
                // alert('手机号输入不正确');
                layer.msg('手机号输入不正确',{
                    icon: 2,
                    title:false,
                    time:5000

                })
                return false;
            }
        }
    }
    //发送验证码
    var countdown = 60;
    function settime(obj) {
        if (countdown == 0) {
            $('.send').addClass('send_button');
            obj.attr("onclick","sendMobile()");//设置onclick属性
            obj.text("获取验证码");
            countdown = 60;
            return;
        } else {
            $('.send').removeClass('send_button');
            obj.removeAttr("onclick");//移除onclick属性
            obj.text("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(function() {settime(obj) },1000);//设置定时任务，1000毫秒为1秒
    }
    function sendMobile(obj) {
        var mobile = $('.telephone').val();
        if(mobile == ""){
            // alert("请输入手机号");
            layer.msg('请输入手机号',{
                icon: 2,
                title:false,
                time:5000

            })
            return false;
        }else{
            $.ajax({
                type: 'POST',
                url: 'sendSNS',
                data: {"mobile":mobile},
                dataType:'json',
                success: function (eee) {
                    if(eee== 1){
                        settime($(".send"));//设置倒计时
                        // alert("发送成功");
                        layer.msg('发送成功',{
                            icon: 1,
                            title:false,
                            time:5000

                        })
                        return false;
                    }
                },
            });
        }
    }

    $(".hday").change(function(){
        $.ajax({
            type: 'get',
            url: 'persionnum',
            data: {"id":$(".acid").val(),"day":$(this).val()},
            dataType:'json',
            success: function (result) {
                if(result < 1){
                    // alert(1);
                    $(".hy").css("display",'none');
                    $(".orange").text("活动已满员,请联系五四宪法历史资料陈列馆")
                }else{
                    // alert(2);
                    $(".hy").css("display",'block');
                    $(".orange").text("活动名额还剩"+result+"位")
                }
            },
        });
    });


    //获取省份
    $(".province").click(function(){
        $(".city1").css("display","block");
        $(".city1").find("option").remove();
        $.ajax({
            type: 'get',
            url: '/home/user/province',
            data: {"id":$(".province").val()},
            dataType:'json',
            success: function (result) {
                $.each(result,function(i,val){
                    $(".city").append(
                        '<option  value="'+i+'">' +
                        val+ "</option>")
                });
            },
        });
    });

    //获取 城市
    $(".city").click(function(){
        $(".country1").css("display","block");
        $(".country1").find("option").remove();
        $.ajax({
            type: 'get',
            url: '/home/user/city',
            data: {"id":$(".city").val()},
            dataType:'json',
            success: function (result) {
                $.each(result,function(i,val){
                    $(".country").append(
                        '<option  value="'+i+'">' +
                        val+ "</option>")
                });
            },
        });
    });
    var flag = true;
    function checkParse(event) {
        $('.prev_part input').each(function(){
            //参数验证
            var text = $(this).val();
            if(text==""){
                // alert('请填写' + $(this).attr('title') + '!');
                layer.msg('请填写' + $(this).attr('title') + '!',{
                    icon: 2,
                    title:false,
                    time:5000

                })
                flag = false;
                event.preventDefault();
            }
            else{
                flag = true;
            }
        });
        if(flag){
            $("#activity_info").submit();
        }
    }

</script>
</body>
</html>